<template>
	<view class="container-page">
		<u-list v-if="form" class="main">
			<u-list-item v-for="(item, index) in form" :key="index" :show="item.show" :index="index">
				<view class="rounded">
					<view class="t32 c-content flex">
						<view class="t32 c-primary tbold">{{item.name}}</view>
						<view class="t24 c-content ml24">{{item.desc}}</view>
					</view>
					<view class="mt32 flex-between">
						<view class="t32 c-error tbold">￥{{item.price}}</view>
						<u-number-box v-model="item.count" @change="onChange" :min="0"></u-number-box>
					</view>
				</view>
			</u-list-item>
		</u-list>
		<u-line></u-line>
		<view class="bottom p64"  style="display: flex;">
			<view class="t32 c-content" style="flex: 1;text-align: center;align-self: center;">
				<u-button type="info" shape="circle" @click="cancel">取消服务</u-button>
			</view>
			<view class="ml48" style="flex: 2;">
				<u-button type="success" shape="circle" @click="submit">确定<text class="ml24 t24 c-error" v-if="price>0"> ({{count}}个,￥{{price}})</text></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: [
					{
						name: "快递小盒",
						desc: "20cm*10cm*18cm",
						price: 1,
						count: 0,
					},
					{
						name: "快递纸箱1号",
						desc: "25cm*18cm*20cm",
						price: 2,
						count: 0,
					},
					{
						name: "快递纸箱2号",
						desc: "30cm*20cm*25cm",
						price: 3,
						count: 0,
					},
					{
						name: "快递纸箱3号",
						desc: "36cm*25cm*30cm",
						price: 4,
						count: 0,
					},
					{
						name: "快递纸箱4号",
						desc: "53cm*32cm*23cm",
						price: 5,
						count: 0,
					},
					{
						name: "快递纸箱5号",
						desc: "53cm*23cm*32cm",
						price: 5,
						count: 0,
					},
					{
						name: "1号纸箱",
						desc: "30cm*23cm*23cm",
						price: 5,
						count: 0,
					},
					{
						name: "2号纸箱",
						desc: "46cm*28cm*33cm",
						price: 7,
						count: 0,
					},
					{
						name: "3号纸箱",
						desc: "50cm*32cm*54cm",
						price: 10,
						count: 0,
					},
					{
						name: "4号纸箱",
						desc: "60cm*40cm*50cm",
						price: 15,
						count: 0,
					}
				],
				count: 0,
				price: 0
			}
		},
		created() {

		},
		mounted() {

		},
		onReady() {

		},
		onLoad(e) {
			var bean=uni.getStorageSync('carry_valueadd_carton')
			if(bean){
				this.form=bean;
				this.calcTotal()
			}
		},
		onShow() {


		},
		methods: {
			onChange(e){
				setTimeout(() => {
					this.calcTotal()
				}, 100)
			},
			calcTotal() {
				var count=0;
				var price=0;
				for (var i = 0; i < this.form.length; i++) {
					count+=this.form[i].count
					price+=this.form[i].price*this.form[i].count
				}
				this.count = count
				this.price = price
			},	
			submit() {
				// this.$refs.uForm.validate().then(res => {
					uni.$emit('carry_valueadd_carton', (this.price>0)?this.form:null)
					uni.setStorageSync('carry_valueadd_carton', (this.price>0)?this.form:null);
					uni.navigateBack();
				// }).catch(errors => {
				// 	uni.$u.toast('信息未填写完整')
				// })
			},
			cancel() {
				uni.$emit('carry_valueadd_carton', null)
				uni.setStorageSync('carry_valueadd_carton', null);
				uni.navigateBack();
			},
		}
	}
</script>
<style scoped lang="scss">
	.container-page {
		height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top));
		display: flex;
		flex-direction: column;
		.main {
			flex: 1;
			overflow: hidden;
		}
		.bottom {
			padding: 32rpx 32rpx;
		}
	}
	
	.rounded {
		margin: 0 32rpx 32rpx 32rpx;
		padding: 32rpx;
		background-color: $u-bg-color; /* 红色 */
		border-radius: 10px; /* 设置为10像素的圆角 */
	}
</style>